<template>
  <div class="registerBox">
    <div v-show="!isHideVerificationCode" class="registerFrom">
      <p class="phoneTit">手机号：</p>
      <div class="phoneBox">
        <div class="CountryCode" @click="isSelectRegion = true">
          +{{ CountryCodeObj.code }}
          <i class="iconfont icon-below-s lowerTriangle"></i>
        </div>
        <input type="text" class="phoneInput" v-model="phone" maxlength="11" />
        <ul class="CountryCodeAllBox" v-show="isSelectRegion">
          <li
            v-for="(item, index) in CountryCodeList"
            :key="index"
            class="CountryCodeItem"
            @click="setCountryCodeObj(item)"
          >
            <span>{{ item.zh }}</span>
            <span>+{{ item.code }}</span>
          </li>
        </ul>
      </div>
      <p class="phoneTit">密码：</p>
      <div class="passwordBox">
        <input type="text" class="passwordInput" v-model="password" />
        <div>
          <p
            :class="
              verificationObj.isSpace ? 'verificationYse' : 'verificationNo'
            "
          >
            <i class="verificationIcon"></i>
            密码不能包含空格
          </p>
          <p
            :class="
              verificationObj.isContent ? 'verificationYse' : 'verificationNo'
            "
          >
            <i class="verificationIcon"></i>
            包含字母、数字、符号中至少两种
          </p>
          <p
            :class="
              verificationObj.isPasswordLength
                ? 'verificationYse'
                : 'verificationNo'
            "
          >
            <i class="verificationIcon"></i>
            密码长度为8-20位
          </p>
        </div>
      </div>
      <div class="register" @click="nextRegister">
        <i>下一步</i>
      </div>
    </div>
    <VerificationCode
      :phone="phone"
      :password="password"
      :CountryCodeObj="CountryCodeObj"
      v-show="isHideVerificationCode"
      ref="VerificationCode"
    />
    <div class="outLogin">
      <span class="outLoginBtn" @click="setChange_ChoiceNum(1)"
        >&lt; 返回登录</span
      >
    </div>
  </div>
</template>

<script>
import { countryCode, isRegister } from "@/api";
import { mapActions } from "vuex";
import VerificationCode from "@/components/Login/VerificationCode.vue";
export default {
  data() {
    return {
      CountryCodeList: [], //地区码列表
      CountryCodeObj: {}, //选择的地区码
      isSelectRegion: false,
      verificationObj: {
        isSpace: false,
        isContent: false,
        isPasswordLength: false,
      },
      password: "",
      phone: "",
      isHideVerificationCode: false,
    };
  },
  created() {
    this.getCountryCode();
  },
  components: {
    VerificationCode,
  },
  methods: {
    ...mapActions("loginStore", ["setChange_ChoiceNum"]),
    async nextRegister() {
      let isError = false;
      if (!this.verification()) return;
      await isRegister({
        phone: this.phone,
        countrycode: this.CountryCodeObj.code,
      }).then((res) => {
        if (res.code == 200) {
          if (res.exist == 1) {
            this.$message.error("该手机号已注册");
            isError = true;
          }
        }
      });
      if (isError) return;
      this.isHideVerificationCode = true;
      this.$refs.VerificationCode.getCode();
    },
    getCountryCode() {
      countryCode().then((res) => {
        // console.log(res, 123);
        this.CountryCodeObj = res.data[0].countryList[0];
        res.data.map((itemOne) => {
          itemOne.countryList.map((itemTwo) => {
            this.CountryCodeList.push(itemTwo);
          });
        });
      });
    },
    setCountryCodeObj(item) {
      this.CountryCodeObj = item;
      this.isSelectRegion = false;
    },
    //验证
    verification() {
      if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
        this.$message.error("手机号错误");
        return false;
      }
      if (
        !this.verificationObj.isSpace ||
        !this.verificationObj.isContent ||
        !this.verificationObj.isPasswordLength
      ) {
        this.$message.error("密码格式错误");
        return false;
      }
      return true;
    },
  },
  watch: {
    password(newValue, oldValue) {
      if (!/^\S*$/.test(newValue)) {
        this.verificationObj.isSpace = false;
      } else {
        this.verificationObj.isSpace = true;
      }
      if (
        !/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]/.test(newValue)
      ) {
        this.verificationObj.isContent = false;
      } else {
        this.verificationObj.isContent = true;
      }
      if (newValue.length > 20 || newValue.length < 8) {
        this.verificationObj.isPasswordLength = false;
      } else {
        this.verificationObj.isPasswordLength = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.registerBox {
  flex: 1;
  position: relative;
  .registerFrom {
    padding: 30px 0 43px;
    width: 220px;
    margin: 0 auto;
    .phoneTit {
      color: #666;
      font-size: 12px;
    }
    .phoneBox {
      position: relative;
      height: 30px;
      margin: 0;
      border: 1px solid #cdcdcd;
      border-radius: 2px;
      z-index: 10;
      display: flex;
      .CountryCode {
        height: 30px;
        color: #333;
        position: relative;
        line-height: 30px;
        padding: 0 18px 0 5px;
        font-size: 12px;
        border-right: 1px solid #cdcdcd;
        overflow: hidden;
        .lowerTriangle {
          position: absolute;
          top: 1px;
          right: 1px;
          font-size: 10px;
          color: #999;
        }
      }
      .phoneInput {
        flex: 1;
        border: none;
        color: #333;
        font-size: 12px;
        outline: none;
        padding-left: 10px;
      }
      .CountryCodeAllBox {
        position: absolute;
        top: 31px;
        left: -1px;
        width: 100%;
        height: 128px;
        border: 1px solid #cdcdcd;
        border-top: none;
        clear: both;
        background-color: #fff;
        overflow: auto;
        .CountryCodeItem {
          font-size: 12px;
          color: #333;
          height: 32px;
          color: #333;
          padding: 0 10px;
          cursor: pointer;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:hover {
            background-color: #eaeaea;
          }
        }
      }
    }
    .passwordBox {
      .passwordInput {
        border: 1px solid #cdcdcd;
        border-radius: 2px;
        box-sizing: border-box;
        width: 100%;
        padding: 5px 6px 6px;
        line-height: 19px;
        outline: none;
        font-size: 12px;
      }
      .verificationYse {
        color: #333;
        font-size: 12px;
        margin-top: 5px;
        line-height: 18px;
        .verificationIcon {
          margin-right: 4px;
          width: 14px;
          height: 14px;
          background: url("./../../assets/imges/loginYesIcon.png") no-repeat;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .verificationNo {
        color: #e33232;
        font-size: 12px;
        margin-top: 5px;
        line-height: 18px;
        .verificationIcon {
          margin-right: 4px;
          width: 14px;
          height: 14px;
          background: url("./../../assets/imges/btnIconTwo.png") no-repeat -50px -270px;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .register {
      margin-top: 10px;
      border-radius: 4px;
      color: #333;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      padding: 0 5px 0 0;
      cursor: pointer;
      background: url("./../../assets/imges/backgroundStripe.png") no-repeat
        right -100px;
      i {
        width: 180px;
        height: 31px;
        padding: 0 15px 0 20px;
        font-size: 12px;
        line-height: 31px;
        background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -59px;
        display: inline-block;
      }
    }
  }
  .outLogin {
    padding: 0 19px;
    height: 48px;
    border-top: 1px solid #c6c6c6;
    border-radius: 0 0 4px 4px;
    line-height: 48px;
    background-color: #f7f7f7;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    .outLoginBtn {
      color: #0c72c3;
      font-size: 12px;
      cursor: pointer;
    }
  }
}
</style>